{% extends 'base.html' %}
{% load static %}

{% block contents_inner %}
                <div class="col-12">
                    <div class="section-content">
                        <div class="row">
                            <div class="col-lg-3 col-md-6">
                                <div class="statistic-box m-0">
                                    <h4 class="statistic-title float-left">数据量统计</h4>
                                    <div class="statistic-details">
                                        <span class="count float-left">56604</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="statistic-box m-0">
                                    <h4 class="statistic-title float-left">城市统计</h4>
                                    <div class="statistic-details">
                                        <span class="count float-left">31</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="statistic-box m-0">
                                    <h4 class="statistic-title float-left">日期统计</h4>


                                    <div class="statistic-details">
                                        <span class="count float-left">1825</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="statistic-box m-0">
                                    <h4 class="statistic-title float-left">省份统计</h4>
                                    <div class="statistic-details">
                                        <span class="count float-left">31</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="row">
                        <div class="col-lg-3 col-md-6">
                            <div class="section-content">
                                <div class="widget-box bg-purple">
                                    <a href="{% url 'chart:AQI_line_chart' %}">
                                    <div class="widget-text">
                                        <h3>AQI折线图</h3>
                                    </div>
                                </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="section-content">
                                <div class="widget-box bg-danger">
                                    <a href="{% url 'predict:AQI_prediction_lstm' %}">
                                    <div class="widget-text">
                                        <h3>AQI预测</h3>
                                    </div>
                                </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="section-content">
                                <div class="widget-box bg-primary">
                                    <a href="{% url 'dataset:display' %}">
                                    <div class="widget-text">
                                        <h3>空气数据表</h3>
                                    </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="section-content">
                                <div class="widget-box bg-success">
                                    <a href="{% url 'chart:AQI_map_distribution' %}">
                                    <div class="widget-text">
                                        <h3>实时城市AQI</h3>
                                    </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="section-content">
                        <div class="content-head"><h4 class="content-title">日历</h4>
                            <div class="corner-content float-right">
                                <button class="content-settings" data-toggle="tooltip" data-placement="top" title=""
                                        data-original-title="Settings"><i class="fa fa-cog"></i></button>
                                <button class="content-refresh" data-toggle="tooltip" data-placement="top" title=""
                                        data-original-title="Reload"><i class="fa fa-refresh"></i></button>
                                <button class="content-collapse" data-toggle="tooltip" data-placement="top" title=""
                                        data-original-title="Collapse"><i class="fa fa-angle-down"></i></button>
                                <button class="content-close" data-toggle="tooltip" data-placement="top" title=""
                                        data-original-title="Close"><i class="fa fa-close"></i></button>
                            </div>
                        </div>
                        <div class="content-details show">
                            <div id="calendar" class="fc fc-unthemed fc-ltr">
                                <div class="fc-toolbar fc-header-toolbar">
                                    <div class="fc-left"><h2>April 2024</h2></div>
                                    <div class="fc-right">
                                        <button type="button"
                                                class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right fc-state-disabled"
                                                disabled="">today
                                        </button>
                                        <div class="fc-button-group">
                                            <button type="button"
                                                    class="fc-prev-button fc-button fc-state-default fc-corner-left">
                                                <span class="fc-icon fc-icon-left-single-arrow"></span></button>
                                            <button type="button"
                                                    class="fc-next-button fc-button fc-state-default fc-corner-right">
                                                <span class="fc-icon fc-icon-right-single-arrow"></span></button>
                                        </div>
                                    </div>
                                    <div class="fc-center"></div>
                                    <div class="fc-clear"></div>
                                </div>
                                <div class="fc-view-container" style="">
                                    <div class="fc-view fc-month-view fc-basic-view" style="">
                                        <table>
                                            <thead class="fc-head">
                                            <tr>
                                                <td class="fc-head-container fc-widget-header">
                                                    <div class="fc-row fc-widget-header">
                                                        <table>
                                                            <thead>
                                                            <tr>
                                                                <th class="fc-day-header fc-widget-header fc-sun"><span>Sun</span>
                                                                </th>
                                                                <th class="fc-day-header fc-widget-header fc-mon"><span>Mon</span>
                                                                </th>
                                                                <th class="fc-day-header fc-widget-header fc-tue"><span>Tue</span>
                                                                </th>
                                                                <th class="fc-day-header fc-widget-header fc-wed"><span>Wed</span>
                                                                </th>
                                                                <th class="fc-day-header fc-widget-header fc-thu"><span>Thu</span>
                                                                </th>
                                                                <th class="fc-day-header fc-widget-header fc-fri"><span>Fri</span>
                                                                </th>
                                                                <th class="fc-day-header fc-widget-header fc-sat"><span>Sat</span>
                                                                </th>
                                                            </tr>
                                                            </thead>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                            </thead>
                                            <tbody class="fc-body">
                                            <tr>
                                                <td class="fc-widget-content">
                                                    <div class="fc-scroller fc-day-grid-container"
                                                         style="overflow: hidden; height: 695px;">
                                                        <div class="fc-day-grid fc-unselectable">
                                                            <div class="fc-row fc-week fc-widget-content"
                                                                 style="height: 115px;">
                                                                <div class="fc-bg">
                                                                    <table>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td class="fc-day fc-widget-content fc-sun fc-other-month fc-past"
                                                                                data-date="2024-03-31"></td>
                                                                            <td class="fc-day fc-widget-content fc-mon fc-past"
                                                                                data-date="2024-04-01"></td>
                                                                            <td class="fc-day fc-widget-content fc-tue fc-today fc-state-highlight"
                                                                                data-date="2024-04-02"></td>
                                                                            <td class="fc-day fc-widget-content fc-wed fc-future"
                                                                                data-date="2024-04-03"></td>
                                                                            <td class="fc-day fc-widget-content fc-thu fc-future"
                                                                                data-date="2024-04-04"></td>
                                                                            <td class="fc-day fc-widget-content fc-fri fc-future"
                                                                                data-date="2024-04-05"></td>
                                                                            <td class="fc-day fc-widget-content fc-sat fc-future"
                                                                                data-date="2024-04-06"></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class="fc-content-skeleton">
                                                                    <table>
                                                                        <thead>
                                                                        <tr>
                                                                            <td class="fc-day-top fc-sun fc-other-month fc-past"
                                                                                data-date="2024-03-31"><span
                                                                                    class="fc-day-number">31</span></td>
                                                                            <td class="fc-day-top fc-mon fc-past"
                                                                                data-date="2024-04-01"><span
                                                                                    class="fc-day-number">1</span></td>
                                                                            <td class="fc-day-top fc-tue fc-today fc-state-highlight"
                                                                                data-date="2024-04-02"><span
                                                                                    class="fc-day-number">2</span></td>
                                                                            <td class="fc-day-top fc-wed fc-future"
                                                                                data-date="2024-04-03"><span
                                                                                    class="fc-day-number">3</span></td>
                                                                            <td class="fc-day-top fc-thu fc-future"
                                                                                data-date="2024-04-04"><span
                                                                                    class="fc-day-number">4</span></td>
                                                                            <td class="fc-day-top fc-fri fc-future"
                                                                                data-date="2024-04-05"><span
                                                                                    class="fc-day-number">5</span></td>
                                                                            <td class="fc-day-top fc-sat fc-future"
                                                                                data-date="2024-04-06"><span
                                                                                    class="fc-day-number">6</span></td>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <div class="fc-row fc-week fc-widget-content"
                                                                 style="height: 115px;">
                                                                <div class="fc-bg">
                                                                    <table>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td class="fc-day fc-widget-content fc-sun fc-future"
                                                                                data-date="2024-04-07"></td>
                                                                            <td class="fc-day fc-widget-content fc-mon fc-future"
                                                                                data-date="2024-04-08"></td>
                                                                            <td class="fc-day fc-widget-content fc-tue fc-future"
                                                                                data-date="2024-04-09"></td>
                                                                            <td class="fc-day fc-widget-content fc-wed fc-future"
                                                                                data-date="2024-04-10"></td>
                                                                            <td class="fc-day fc-widget-content fc-thu fc-future"
                                                                                data-date="2024-04-11"></td>
                                                                            <td class="fc-day fc-widget-content fc-fri fc-future"
                                                                                data-date="2024-04-12"></td>
                                                                            <td class="fc-day fc-widget-content fc-sat fc-future"
                                                                                data-date="2024-04-13"></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class="fc-content-skeleton">
                                                                    <table>
                                                                        <thead>
                                                                        <tr>
                                                                            <td class="fc-day-top fc-sun fc-future"
                                                                                data-date="2024-04-07"><span
                                                                                    class="fc-day-number">7</span></td>
                                                                            <td class="fc-day-top fc-mon fc-future"
                                                                                data-date="2024-04-08"><span
                                                                                    class="fc-day-number">8</span></td>
                                                                            <td class="fc-day-top fc-tue fc-future"
                                                                                data-date="2024-04-09"><span
                                                                                    class="fc-day-number">9</span></td>
                                                                            <td class="fc-day-top fc-wed fc-future"
                                                                                data-date="2024-04-10"><span
                                                                                    class="fc-day-number">10</span></td>
                                                                            <td class="fc-day-top fc-thu fc-future"
                                                                                data-date="2024-04-11"><span
                                                                                    class="fc-day-number">11</span></td>
                                                                            <td class="fc-day-top fc-fri fc-future"
                                                                                data-date="2024-04-12"><span
                                                                                    class="fc-day-number">12</span></td>
                                                                            <td class="fc-day-top fc-sat fc-future"
                                                                                data-date="2024-04-13"><span
                                                                                    class="fc-day-number">13</span></td>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <div class="fc-row fc-week fc-widget-content"
                                                                 style="height: 115px;">
                                                                <div class="fc-bg">
                                                                    <table>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td class="fc-day fc-widget-content fc-sun fc-future"
                                                                                data-date="2024-04-14"></td>
                                                                            <td class="fc-day fc-widget-content fc-mon fc-future"
                                                                                data-date="2024-04-15"></td>
                                                                            <td class="fc-day fc-widget-content fc-tue fc-future"
                                                                                data-date="2024-04-16"></td>
                                                                            <td class="fc-day fc-widget-content fc-wed fc-future"
                                                                                data-date="2024-04-17"></td>
                                                                            <td class="fc-day fc-widget-content fc-thu fc-future"
                                                                                data-date="2024-04-18"></td>
                                                                            <td class="fc-day fc-widget-content fc-fri fc-future"
                                                                                data-date="2024-04-19"></td>
                                                                            <td class="fc-day fc-widget-content fc-sat fc-future"
                                                                                data-date="2024-04-20"></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class="fc-content-skeleton">
                                                                    <table>
                                                                        <thead>
                                                                        <tr>
                                                                            <td class="fc-day-top fc-sun fc-future"
                                                                                data-date="2024-04-14"><span
                                                                                    class="fc-day-number">14</span></td>
                                                                            <td class="fc-day-top fc-mon fc-future"
                                                                                data-date="2024-04-15"><span
                                                                                    class="fc-day-number">15</span></td>
                                                                            <td class="fc-day-top fc-tue fc-future"
                                                                                data-date="2024-04-16"><span
                                                                                    class="fc-day-number">16</span></td>
                                                                            <td class="fc-day-top fc-wed fc-future"
                                                                                data-date="2024-04-17"><span
                                                                                    class="fc-day-number">17</span></td>
                                                                            <td class="fc-day-top fc-thu fc-future"
                                                                                data-date="2024-04-18"><span
                                                                                    class="fc-day-number">18</span></td>
                                                                            <td class="fc-day-top fc-fri fc-future"
                                                                                data-date="2024-04-19"><span
                                                                                    class="fc-day-number">19</span></td>
                                                                            <td class="fc-day-top fc-sat fc-future"
                                                                                data-date="2024-04-20"><span
                                                                                    class="fc-day-number">20</span></td>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <div class="fc-row fc-week fc-widget-content"
                                                                 style="height: 115px;">
                                                                <div class="fc-bg">
                                                                    <table>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td class="fc-day fc-widget-content fc-sun fc-future"
                                                                                data-date="2024-04-21"></td>
                                                                            <td class="fc-day fc-widget-content fc-mon fc-future"
                                                                                data-date="2024-04-22"></td>
                                                                            <td class="fc-day fc-widget-content fc-tue fc-future"
                                                                                data-date="2024-04-23"></td>
                                                                            <td class="fc-day fc-widget-content fc-wed fc-future"
                                                                                data-date="2024-04-24"></td>
                                                                            <td class="fc-day fc-widget-content fc-thu fc-future"
                                                                                data-date="2024-04-25"></td>
                                                                            <td class="fc-day fc-widget-content fc-fri fc-future"
                                                                                data-date="2024-04-26"></td>
                                                                            <td class="fc-day fc-widget-content fc-sat fc-future"
                                                                                data-date="2024-04-27"></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class="fc-content-skeleton">
                                                                    <table>
                                                                        <thead>
                                                                        <tr>
                                                                            <td class="fc-day-top fc-sun fc-future"
                                                                                data-date="2024-04-21"><span
                                                                                    class="fc-day-number">21</span></td>
                                                                            <td class="fc-day-top fc-mon fc-future"
                                                                                data-date="2024-04-22"><span
                                                                                    class="fc-day-number">22</span></td>
                                                                            <td class="fc-day-top fc-tue fc-future"
                                                                                data-date="2024-04-23"><span
                                                                                    class="fc-day-number">23</span></td>
                                                                            <td class="fc-day-top fc-wed fc-future"
                                                                                data-date="2024-04-24"><span
                                                                                    class="fc-day-number">24</span></td>
                                                                            <td class="fc-day-top fc-thu fc-future"
                                                                                data-date="2024-04-25"><span
                                                                                    class="fc-day-number">25</span></td>
                                                                            <td class="fc-day-top fc-fri fc-future"
                                                                                data-date="2024-04-26"><span
                                                                                    class="fc-day-number">26</span></td>
                                                                            <td class="fc-day-top fc-sat fc-future"
                                                                                data-date="2024-04-27"><span
                                                                                    class="fc-day-number">27</span></td>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <div class="fc-row fc-week fc-widget-content"
                                                                 style="height: 115px;">
                                                                <div class="fc-bg">
                                                                    <table>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td class="fc-day fc-widget-content fc-sun fc-future"
                                                                                data-date="2024-04-28"></td>
                                                                            <td class="fc-day fc-widget-content fc-mon fc-future"
                                                                                data-date="2024-04-29"></td>
                                                                            <td class="fc-day fc-widget-content fc-tue fc-future"
                                                                                data-date="2024-04-30"></td>
                                                                            <td class="fc-day fc-widget-content fc-wed fc-other-month fc-future"
                                                                                data-date="2024-05-01"></td>
                                                                            <td class="fc-day fc-widget-content fc-thu fc-other-month fc-future"
                                                                                data-date="2024-05-02"></td>
                                                                            <td class="fc-day fc-widget-content fc-fri fc-other-month fc-future"
                                                                                data-date="2024-05-03"></td>
                                                                            <td class="fc-day fc-widget-content fc-sat fc-other-month fc-future"
                                                                                data-date="2024-05-04"></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class="fc-content-skeleton">
                                                                    <table>
                                                                        <thead>
                                                                        <tr>
                                                                            <td class="fc-day-top fc-sun fc-future"
                                                                                data-date="2024-04-28"><span
                                                                                    class="fc-day-number">28</span></td>
                                                                            <td class="fc-day-top fc-mon fc-future"
                                                                                data-date="2024-04-29"><span
                                                                                    class="fc-day-number">29</span></td>
                                                                            <td class="fc-day-top fc-tue fc-future"
                                                                                data-date="2024-04-30"><span
                                                                                    class="fc-day-number">30</span></td>
                                                                            <td class="fc-day-top fc-wed fc-other-month fc-future"
                                                                                data-date="2024-05-01"><span
                                                                                    class="fc-day-number">1</span></td>
                                                                            <td class="fc-day-top fc-thu fc-other-month fc-future"
                                                                                data-date="2024-05-02"><span
                                                                                    class="fc-day-number">2</span></td>
                                                                            <td class="fc-day-top fc-fri fc-other-month fc-future"
                                                                                data-date="2024-05-03"><span
                                                                                    class="fc-day-number">3</span></td>
                                                                            <td class="fc-day-top fc-sat fc-other-month fc-future"
                                                                                data-date="2024-05-04"><span
                                                                                    class="fc-day-number">4</span></td>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <div class="fc-row fc-week fc-widget-content"
                                                                 style="height: 120px;">
                                                                <div class="fc-bg">
                                                                    <table>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td class="fc-day fc-widget-content fc-sun fc-other-month fc-future"
                                                                                data-date="2024-05-05"></td>
                                                                            <td class="fc-day fc-widget-content fc-mon fc-other-month fc-future"
                                                                                data-date="2024-05-06"></td>
                                                                            <td class="fc-day fc-widget-content fc-tue fc-other-month fc-future"
                                                                                data-date="2024-05-07"></td>
                                                                            <td class="fc-day fc-widget-content fc-wed fc-other-month fc-future"
                                                                                data-date="2024-05-08"></td>
                                                                            <td class="fc-day fc-widget-content fc-thu fc-other-month fc-future"
                                                                                data-date="2024-05-09"></td>
                                                                            <td class="fc-day fc-widget-content fc-fri fc-other-month fc-future"
                                                                                data-date="2024-05-10"></td>
                                                                            <td class="fc-day fc-widget-content fc-sat fc-other-month fc-future"
                                                                                data-date="2024-05-11"></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class="fc-content-skeleton">
                                                                    <table>
                                                                        <thead>
                                                                        <tr>
                                                                            <td class="fc-day-top fc-sun fc-other-month fc-future"
                                                                                data-date="2024-05-05"><span
                                                                                    class="fc-day-number">5</span></td>
                                                                            <td class="fc-day-top fc-mon fc-other-month fc-future"
                                                                                data-date="2024-05-06"><span
                                                                                    class="fc-day-number">6</span></td>
                                                                            <td class="fc-day-top fc-tue fc-other-month fc-future"
                                                                                data-date="2024-05-07"><span
                                                                                    class="fc-day-number">7</span></td>
                                                                            <td class="fc-day-top fc-wed fc-other-month fc-future"
                                                                                data-date="2024-05-08"><span
                                                                                    class="fc-day-number">8</span></td>
                                                                            <td class="fc-day-top fc-thu fc-other-month fc-future"
                                                                                data-date="2024-05-09"><span
                                                                                    class="fc-day-number">9</span></td>
                                                                            <td class="fc-day-top fc-fri fc-other-month fc-future"
                                                                                data-date="2024-05-10"><span
                                                                                    class="fc-day-number">10</span></td>
                                                                            <td class="fc-day-top fc-sat fc-other-month fc-future"
                                                                                data-date="2024-05-11"><span
                                                                                    class="fc-day-number">11</span></td>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                            <td></td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
{% endblock %}

